<template>
    <div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="data in datalist" :key="data">{{ data }}</div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
</template>
<script>
// 按需载入
// import Swiper from 'swiper'
// import 'swiper/swiper-bundle.css'
// import { Pagination } from 'swiper';
// Swiper.use([Pagination]);
//全部载入
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';


export default {
    data() {
        return {
            datalist: [],
        }
    },
    mounted() {
        setTimeout(() => {
            this.datalist = ['1111', '22222', '33333', '44444'];
            this.$nextTick(() => {
                var mySwiper = new Swiper('.swiper', {
                    //   direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },

                    //   如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                    on: {
                        slideChange: function () {
                            console.log('改变了，activeIndex为' + this.activeIndex);
                        },
                    },
                });
            })
        }, 2000);
    },
    updated() {
        
    },
}
</script>

<style>
.swiper {
    height: 200px;
    color: red;
    background-color: rgb(246, 246, 246);
}

/* .swiper-slide {
    width: 100px;
    line-height: 40px;
    font-size: 30px;
    text-align: center;
    border: 1px solid pink;
} */
</style>